<template>
  <div id="index">
    <el-row type="flex" justify="center" style="margin-top: 50px;">
      <el-col :span="16">
        <el-row>
          <el-col :span="24">
            <h2>尊敬的小主您好，欢迎访问系统！</h2>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form>
              <el-form-item label="头像">
                <upload :links="link" :size="1" :accept="'.jpg,.jpeg,.png,.gif'" />
              </el-form-item>
              <el-form-item label="用户名">
                <el-input v-model="form.username" />
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="form.password" />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="form.mobile" />
              </el-form-item>
              <el-form-item label="昵称">
                <el-input v-model="form.nickName" />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                  <el-radio-button label="1">男</el-radio-button>
                  <el-radio-button label="2">女</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="text-align: center">
                <el-button style="width: 20%" type="primary" @click="submit">提交</el-button>
                <el-button style="width: 20%">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/upload/index'
import { info, add } from '@/api/member/user'
import { getToken } from '@/utils/auth'
export default {
  name: 'UserInfoEdit',
  components: { upload },
  data() {
    return {
      id: undefined,
      form: {},
      link: []
    }
  },
  mounted() {
    if (getToken()) {
      info().then(res => {
        const data = res.data.data
        data.password = undefined
        this.form = data
        this.link.push({ url: data.avatar })
      })
    }
  },
  methods: {
    submit() {
      this.form.avatar = this.link[0].url
      add(this.form).then(res => {
        if (res.data.code === 200) {
          this.$notify.success({
            title: '成功',
            message: '更新数据成功'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  #index {
    width: 100%;
  }
</style>
